
<template>
		<view class="index-content">
			<!-- 搜索框 -->
			<view class="search">
				<icon type="search" class="search-img" size="13" color="#405f80"></icon>
				<input type="text" placeholder="血战钢锯岭、你的名字"@focus="onBindFocus" @blur="onBindChange"/>
				<image v-if="searchPannerShow" class="xx-img" src="../../static/icon/xx.png" @click="onCancelImgTap"></image>
			</view>
			<!-- 展示 -->
			<view class="index-movies-content"  v-if="containerShow">
				<view class="movie-list-template">
					<movielisttemplate :lists="seetedkey.inTheaters"></movielisttemplate>
				</view>
				<view class="movie-list-template">
					<movielisttemplate :lists="seetedkey.comingSooni">></movielisttemplate>
				</view>
				<view class="movie-list-template">
					<movielisttemplate :lists="seetedkey.top250">></movielisttemplate>
				</view>
			</view>
			<!-- 搜索视图 -->
			<view class="search-panel" v-if="searchPannerShow">
				<movieGridTemplate :list="seetedkey"></movieGridTemplate>
			</view>
		</view>	
</template>

<script>
	import movielisttemplate from "./movie-list/movie-list-template";
	import movieGridTemplate from "./movie-grid-template/movie-grid-template.vue";
	import Config from "../../static/model/config.js";
	import util from "../../static/model/util.js";
	export default {
		data(){
			return{
				api:Config.api,
				seetedkey:{},
				containerShow:true,
				searchPannerShow:false,
				inTheatersUrl:Config.api+'/v2/movie/in_theaters?start&count=3',
				comingSooniUrl:Config.api+'/v2/movie/coming_soon?start&count=3',
				top250Url:Config.api+'/v2/movie/top250?start&count=3'
			}
		},
		methods:{//方法
			apii(url,method,seetedkey,categoryTitle){
				var that=this;
				uni.request({
					url:url, //仅为示例，并非真实接口地址。
					method:method,
					data: {
					},
					header: {
						'content-type': 'json' //自定义请求头信息
					},
					success: function(res) {
						that.precessDoubanData(res.data,seetedkey,categoryTitle);
					},
					fail: function(err) {
						console.log(err);
					}
				});
			},
			precessDoubanData(moviesDouban,seetedkey,categoryTitle){
				var movies=[];
				for(var idx in moviesDouban.subjects){
					var subject=moviesDouban.subjects[idx];
					var title=subject.title;
					if(title.length>=6){
						title=title.substring(0,6)+'...';
					}
					var temp={
						title:title,
						average:subject.rating.average,
						coverageUrl:subject.images.large,
						movieId:subject.id
					}	
					movies.push(temp);
				}
				var readyData={};
				if(seetedkey.searchResult==seetedkey.searchResult){
					readyData=movies;
				};
				readyData[seetedkey]={movies,categoryTitle};
				
				this.seetedkey=readyData;
			},
			//搜索事件
			onBindFocus(e){
				this.seetedkey={};
				this.containerShow=false;
				this.searchPannerShow=true;
			},
			//关闭搜索界面
			onCancelImgTap(e){
				this.containerShow=true;
				this.searchPannerShow=false;
				this.apii(this.inTheatersUrl,'GET','inTheaters','正在热映');
				this.apii(this.comingSooniUrl,'GET','comingSooni','即将上映');
				this.apii(this.top250Url,'GET','top250','豆瓣TOP250');
			},
			//搜索事件
			onBindChange(event){
				var text=event.detail.value;
				var searchUrl=this.api+'/v2/movie/search?q='+text;
				this.apii(searchUrl,'GET','searchResult','');
			}
		},
		onLoad(){//生命周期函数
			this.apii(this.inTheatersUrl,'GET','inTheaters','正在热映');
			this.apii(this.comingSooniUrl,'GET','comingSooni','即将上映');
			this.apii(this.top250Url,'GET','top250','豆瓣TOP250');
		},
		components:{//实例化模板
			movielisttemplate,
			movieGridTemplate
		}
	}
</script>

<style>
	.index-content{display: flex;flex-direction:column;background-color: #ccc;width: 100%;}
	.index-movies-content{display: flex;flex-direction:column;background-color: #ccc;width: 100%;}

	.search{background-color: #f2f2f2;height: 80rpx;width: 100%;display: flex;flex-direction: row;margin-bottom: 20rpx;}
	.search-img{margin: auto 0 auto 20rpx;}
	.search input{height: 100%;width:600rpx;margin-left: 20rpx;font-size: 28rpx;}
	.placeholder{font-size:14rpx;color:#d1d1d1;margin-left: 20rpx;}
	.search-panel{position: absolute;top: 80rpx;background-color: #fff;width: 100%;height: 100%;}
	.xx-img{height: 30rpx;width: 30rpx;margin: auto 0 auto 30rpx;}
</style>
